<template>
  <el-container>
    <el-main>
      <div class="title">{{ row.title }}</div>
      <el-row class="mt10">
        <span style="color: #909399;">{{ row.modifyAt | parseTime('{y}-{m}-{d}') }}</span>
        <el-tag class="ml10">{{ row.category }}</el-tag>
        <router-link :to="{name: 'EditTopic', params: row }">
          <el-button class="ml10" type="text" size="mini" icon="el-icon-edit" plain />
        </router-link>
        <!-- <el-rate :value="row.importance" disabled /> -->
      </el-row>
      <el-divider />

      <MarkdownViewer height="800px" :content="row.content" />
    </el-main>
  </el-container>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import MarkdownViewer from '@/components/MarkdownViewer'
import { fetchTopic } from '@/api/info/topic'

export default {
  name: 'Topic',
  directives: { waves },
  components: { MarkdownViewer },
  data() {
    return {
      row: {}
    }
  },
  created() {
    const row = this.$route.params
    if (row.id && row.title === undefined) {
      this.getTopic(row.id)
    } else {
      this.row = Object.assign({}, row)
    }
    // 设置tab标签名字
    this.setTagsViewTitle(this.row.title)
  },
  methods: {
    getTopic(id) {
      fetchTopic(id).then(response => {
        this.row = response.result
        this.setTagsViewTitle(this.row.title)
      })
    },
    setTagsViewTitle(name) {
      const tmp = Object.assign({}, this.$route, { title: name })
      this.$store.dispatch('tagsView/updateVisitedView', tmp)
      document.title = tmp.title
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  height: calc(100vh - 104px);
  padding: 0 !important;

  .title {
    font-weight: bold;
  }
}
</style>
